<template>
  <view>
    <view v-if="isWord==true">      
      <div class="word-wrap">
          <div id="wordView" v-html="wordText"/>
      </div>
    </view>
    <view v-else>
      <iframe :src="'/static/pdf/web/viewer.html?file='+srcStr" id="iframe" frameborder="0"></iframe>
    </view>    
  </view>
</template>
<script>
var mammoth = require('../../utils/mammoth.browser.js');
export default {
    data() {
        return {
          srcStr: '',
          wordText: '',
          isWord: false,
        };
    },
    props: {
        srcData: {
            default: () => ''
        },
    },
    watch:{
        srcData(val){
            this.srcStr = val.toLowerCase();
            let index = val.lastIndexOf('.');            
            if (val.substring(index)=='.pdf') {
              this.isWord = false;
            }else {
              const xhr = new XMLHttpRequest();
              xhr.open("get", val, true);
              xhr.responseType = "arraybuffer";
              xhr.onload = () => {
                if (xhr.status == 200) {            
                    mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
                      this.$nextTick(() => {
                          this.wordText = resultObject.value;
                          this.isWord = true;
                      })
                    })
                }
              }
              xhr.send();
            }            
        }
    },    
};
</script>
<style>
@import './docview.css';
.word-wrap {
  padding: 15px 15px 65px 15px;
  img {
    width: 100%;
  }
}
</style>